<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EuyGnet_Up</title>
    <link rel="icon" href="logo.jpg" type="x-icon" />
    <meta name="author" content="蒲腾悦">
    <style>
        .header {
            width: 1380px;
            height: 80px;
            background-color: white;
            float: right;
            border-bottom: solid 1px #e9e4e4;
        }
        
        .menu {
            font-size: 17px;
            padding-right: 30px;
            text-align: right;
            color: rgb(245, 131, 96);
            list-style: none;
        }
        
        .menu a {
            text-decoration: none;
            color: rgb(184, 182, 182);
            line-height: 80px;
            padding: 0 20px;
        }
        
        .menu a:link {
            text-decoration: none;
            color: rgb(177, 160, 8);
        }
        
        .menu a:hover {
            text-decoration: underline;
            background-color: rgb(90, 66, 38);
            letter-spacing: 2px;
            font-size: 20px;
            text-align: center;
        }
        
        .menu a.active {
            color: black;
        }
        /* .menu a.visited {
            color: rgb(104, 103, 103);
        } */
        
        .logo {
            float: left;
            font-weight: bold;
            line-height: 50px;
        }
        /* .logo span {
            font-size: 20px;
            color: rgb(211, 208, 206);
            margin-right: 80px;
        } */
        
        .HOME {
            /* height: 1080px; */
            width: 1040px;
            /* margin-top: 5px; */
        }
        
        .hello {
            text-align: center;
            color: rgb(192, 68, 31);
            font-size: 40px;
            position: absolute;
            bottom: 120px;
            left: 660px;
            animation-name: hello;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
        
        @keyframes hello {
            0% {
                transform: scale(0);
            }
            100% {
                transform: scale(40px);
            }
        }
        
        @keyframes a {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(920px, 0px);
            }
        }
        
        .color {
            position: absolute;
            left: 870px;
            bottom: 220px;
        }
        
        .hand {
            position: absolute;
            bottom: 2px;
            animation-name: a;
            animation-duration: 6s;
            animation-delay: 1.5s;
            animation-iteration-count: infinite;
        }
        
        .jiantou {
            position: absolute;
            bottom: 10px;
            left: 720px;
        }
        
        .WORKS {
            background-color: white;
            width: 1040px;
            /* height: 700px; */
            display: inline-block;
            text-align: center;
            position: relative;
            margin-top: 180px;
        }
        
        .WORKS p {
            font-size: 60px;
            text-align: center;
            margin-left: 480px;
            color: rgb(2, 2, 160);
        }
        
        .huaban {
            position: relative;
            left: 520px;
            bottom: 150px;
            animation-name: move;
            animation-duration: 15s;
            animation-iteration-count: infinite;
        }
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(0px, 300px);
            }
            50% {
                transform: translate(-650px, 0px);
            }
            75% {
                transform: translate(0px, 200px);
            }
            100% {
                transform: translate(100px, 0px);
            }
        }
        
        .shigao {
            position: absolute;
            bottom: 110px;
            left: 100px;
            margin-right: 20px;
        }
        
        .shigao1 {
            position: absolute;
            bottom: 110px;
            left: 1040px;
        }
        
        .sample {
            text-align: center;
            margin-bottom: 150px;
            font-size: 20px;
            letter-spacing: 20px;
            display: inline-block;
            text-decoration: none;
            list-style: none;
            margin-left: 350px;
        }
        
        .WORKS ul li {
            display: inline-block;
            font-size: 25px;
            letter-spacing: 20px;
            text-decoration: none;
            padding: 20px;
            /* text-align: center;
            margin-bottom: 10px;
            margin-left: 350px; */
        }
        
        .WORKS ul li a {
            text-decoration: none;
            color: rgb(52, 151, 141);
            text-align: center;
            margin-left: 100px;
        }
        
        .WORKS ul li a:hover {
            text-decoration: underline;
            background-color: rgb(248, 210, 166);
            letter-spacing: 25px;
            font-size: 30px;
        }
        
        .jiantou1 {
            left: 700px;
            bottom: 50px;
            position: absolute;
        }
        
        .CONTACT {
            /* width: px; */
            margin-top: 200px;
            margin-left: 400px;
            margin-bottom: 30px;
        }
        
        .ABOUT {
            margin-top: 80px;
            margin-left: 300px;
            width: 1040px;
            height: 700px;
            font-size: 60px;
            background-color: white;
            display: inline-block;
            position: relative;
        }
        
        .smile1 {
            position: absolute;
            bottom: 555px;
            left: 320px;
        }
        
        .pic {
            animation: scale 5s ease 1 forwards;
            animation-delay: 1s;
            animation-iteration-count: infinite;
        }
        
        @keyframes scale {
            0% {
                transform: scale(0.5);
            }
            100% {
                transform: scale(1.2);
            }
        }
        
        .fog {
            position: absolute;
            left: 450px;
            bottom: 10px;
        }
        
        .skill {
            display: inline-block;
            /* padding: 30px; */
            position: absolute;
            left: 500px;
            bottom: 400px;
            letter-spacing: 40px;
            animation-name: b;
            animation-duration: 3s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
        }
        
        @keyframes b {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(0px, -50px);
            }
        }
        
        .hobby {
            display: inline-block;
            position: absolute;
            left: 500px;
            bottom: 250px;
            letter-spacing: 40px;
        }
        
        .PE {
            display: inline-block;
            position: absolute;
            left: 500px;
            bottom: 100px;
            letter-spacing: 40px;
            animation-name: c;
            animation-duration: 3s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
        }
        
        @keyframes c {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(0px, 50px);
            }
        }
    </style>
</head>

<body>

    <div class="header">

        <div class="logo">
            <img src="logo.jpg" width="75px">
        </div>

        <div class="menu">
            <a class="active" href="#HOME">HOME</a>
            <span>————</span>
            <a href="#WORKS">WORKS</a>


            <span>————</span>
            <a href="#ABOUT">ABOUT</a>
            <span>————</span>
            <a href="#CONTACT">CONTACT</a>


        </div>

    </div>
    <audio src="昼夜 - Five Hundred Miles (钢琴版).mp3" autoplay></audio>
    <div class="HOME" id="HOME">
        <div class="design">
            <img src="第一页 (2).jpg" width="1040px">
            <div class="color">
                <img src="color.png" width="605px">
            </div>
            <div class="hand">
                <img src="hand.png" width="233px">
            </div>
            <div class="hello">
                <h2>HELLO!!</h2>
                <img src="表情.png" width="70px">
            </div>
            <div class="jiantou">
                <a href="#WORKS"><img src="welcome.png" width="124.5px"></a>


            </div>
        </div>

    </div>


    <div class="WORKS" id="WORKS">
        <p>Sample Reels</p>
        <div class="huaban"><img src="画板.png" width="120px"></div>
        <div>
            <div class="sample">
                <ul>
                    <li><a href="poster.html" target="blank">海报</a></li>
                    <li><a href="album.html" target="blank">画册</a></li>
                    <li><a href="painting.html" target="blank">手绘</a></li>
                    <li><a href="pic.html" target="blank">摄影</a></li>

                </ul>


            </div>
        </div>



        <div class="shigao"><img src="石膏.png" width="320px"></div>
        <div class="shigao1"><img src="石膏 - 副本.png" width="320px"></div>

        <div class="jiantou1">
            <a href="#ABOUT"><img src="welcome.png" width="124.5px"></a>


        </div>
    </div>

    <div class="ABOUT" id="ABOUT">
        <p>About Me</p>
        <div class="smile1">
            <img src="笑脸.png" width="62px">
        </div>
        <div class="pic">
            <img src="pic.jpg" width="300px">
        </div>
        <div class="fog">
            <img src="烟雾.png" width="600px">
        </div>
        <div class="skill">

            <img src="Ps.png" width="100px">
            <img src="Ai.png" width="100px">
            <img src="Pr.png" width="100px">

        </div>
        <div class="hobby">
            <img src="电影.png" width="95px">
            <img src="画笔.png" width="95px">
            <img src="话筒.png" width="95px">
        </div>
        <div class="PE">
            <img src="体育-滑板.png" width="95px">
            <img src="篮球.png" width="95px">
            <img src="相机.png" width="95px">
        </div>
    </div>
    <div class="CONTACT" id=CONTACT>
        <img src="联系.jpg" width="750px">


    </div>
</body>

</html>